<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font_3660139_m09i5y0w6z/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            /* height: 400px; */
            height: 295px;
            margin: 100px auto;
            position: relative;
            background-color: pink;
        }

        .box .Gallery {
            position: relative;
        }

        .box .Gallery img {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: all 1s;
        }

        .box .Gallery .active {
            opacity: 1;
        }

        .box .dot {
            width: 100%;
            position: absolute;
            bottom: 5px;
            display: flex;
            justify-content: center;
        }

        .box .dot div {
            background-color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 10px;
            display: inline-block;
            transition: all 0.5s;
        }

        .box .dot .active {
            background-color: red;
        }

        .box .iconfont {
            width: 40px;
            height: 40px;
            font-size: 40px;
            text-align: center;
            background-color: white;
            position: absolute;
            border-radius: 50%;
        }

        .box .icon-zuojiantou1 {
            left: 10px;
            top: 50%;
            margin-top: -10px;
        }

        .box .icon-youjiantou {
            right: 10px;
            top: 50%;
            margin-top: -10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 放置图库 -->
        <div class="Gallery">
        </div>
        <!-- 放置圆点 -->
        <div class="dot">
        </div>
        <div class="iconfont icon-zuojiantou1"></div>
        <div class="iconfont icon-youjiantou"></div>
    </div>
</body>

</html>
<script>
    // 定义class,将创建轮播图的过程封装起来
    class Gallery {
        constructor(Ele, arr) {
            this.dom = document.querySelector(Ele)
            this.data = arr;
            this.index = 0;
            this.timeid = null;
            this.render();
            this.img=this.dom.querySelectorAll('.Gallery img')
            this.div=this.dom.querySelectorAll('.dot div')
            this.automatic();
            this.onevt();
        }
        // 渲染图片，渲染小圆点
        render() {
            let str = ``
            let str1 = ``
            // 渲染图片到页面上
            str = this.data.map((item, index) => {
                return index == 0 ? str = `<img src="${item}" class="active">` : str = `<img src="${item}"">`
            }).join('');
            // 渲染小圆点到页面上
            str1 = this.data.mapstr = this.data.map((item, index) => {
                return index == 0 ? str1 = `<div class="active"></div>` : `<div></div>`
            }).join('');
            // 进行渲染
            this.dom.querySelector('.Gallery').innerHTML = str
            this.dom.querySelector('.dot').innerHTML = str1
        }
        // 自动轮播图片
        automatic() {
            this.timeid = setInterval(() => {
                this.img[this.index].classList.remove('active')
                this.div[this.index].classList.remove('active')
                this.index++
                if (this.index >= this.data.length) { this.index = 0 }
                this.img[this.index].classList.add('active')
                this.div[this.index].classList.add('active')
            }, 2000)

        }
        // 按钮点击功能
        onevt() {
            this.dom.querySelector('.icon-zuojiantou1').onclick = () => {
                clearInterval(this.timeid)
                this.img[this.index].classList.remove('active')
                this.div[this.index].classList.remove('active')
                if (this.index == 0) { this.index = this.data.length }
                this.index--
                this.img[this.index].classList.add('active')
                this.div[this.index].classList.add('active')
                this.automatic()
            }
            this.dom.querySelector('.icon-youjiantou').onclick = () => {
                clearInterval(this.timeid)
                this.img[this.index].classList.remove('active')
                this.div[this.index].classList.remove('active')
                this.index++
                if (this.index == this.data.length) { this.index = 0 }
                this.img[this.index].classList.add('active')
                this.div[this.index].classList.add('active')
                this.automatic()
            }

            for (let i = 0; i < this.div.length; i++) {
                this.div[i].onmouseover = () => {
                    this.img[this.index].classList.remove('active')
                    this.div[this.index].classList.remove('active')
                    clearInterval(this.timeid)
                    this.index = i
                    this.img[this.index].classList.add('active')
                    this.div[this.index].classList.add('active')
                }
                this.div[i].onmouseout = () => {
                    this.automatic()
                }
            }
        }
    }
    // 获取后端数据，把数据传给对象
    let arr = ['img/pic1.jpg', 'img/pic2.jpg', 'img/pic3.jpg', 'img/pic4.jpg']
    let Carousel = new Gallery('.box', arr)
</script>